<!-- 到期设备 -->
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-divider content-position="left">模板位号配置</el-divider>
    </div>
    <div class="searchs">
      <div>
        <span>
          位号名称:
        </span>
        <el-input v-model="queryParams.pointName" placeholder="请输入位号名称" style="width: 200px;" />
      </div>
      <!-- <div>
        <span>
          位号名称:
        </span>
        <el-input v-model="search.name" placeholder="请输入位号名称" style="width: 200px;" />
      </div> -->
    </div>
    <div class="searchs">
      <el-button type="success" plain icon="back" @click="comeBack">返回</el-button>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button>重置</el-button>
      <el-button type="warning" plain icon="select">完成</el-button>
    </div>
    <div class="addType">
      <el-button type="primary" icon="plus" @click="addPageQuery">添加</el-button>
      <pagination @pagination="handleQuery" v-if="queryParams.pages.total > 0" v-model:total="queryParams.pages.total"
        v-model:page="queryParams.pages.current" v-model:limit="queryParams.pages.size" />
    </div>
    <el-table v-loading="loading" :data="pageData">
      <el-table-column label="信号量" align="center" prop="pointCode" />
      <el-table-column label="位号名称" align="center" prop="pointName" />
      <el-table-column label="数据类型" align="center" prop="pointTypeFlag">
        <template #default="scope">
          <template v-if="scope.row.pointTypeFlag === 'STRING'">
            字符串(string)
          </template>
          <template v-else-if="scope.row.pointTypeFlag === 'BYTE'">
            字节(byte)
          </template>
          <template v-else-if="scope.row.pointTypeFlag === 'SHORT'">
            短整数(short)
          </template>
          <template v-else-if="scope.row.pointTypeFlag === 'INT'">
            整数(int)
          </template>
          <template v-else-if="scope.row.pointTypeFlag === 'LONG'">
            长整数(long)
          </template>
          <template v-else-if="scope.row.pointTypeFlag === 'FLOAT'">
            浮点数(float)
          </template>
          <template v-else-if="scope.row.pointTypeFlag === 'DOUBLE'">
            双精度浮点数(double)
          </template>
          <template v-else-if="scope.row.pointTypeFlag === 'BOOLEAN'">
            布尔量(boolean)
          </template>
          <template v-else-if="scope.row.pointTypeFlag === 'ENUM'">
            枚举

            <el-button style="margin-left: 10px;" size="default" type="danger" title="添加枚举含义" circle
              @click="addTypeItmes(scope.row)">
              <el-icon>
                <Plus />
              </el-icon>
            </el-button>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="数据精度" align="center" prop="valueDecimal" />
      <el-table-column label="比例系数" align="center" prop="multiple" />
      <el-table-column label="单位" align="center" prop="unit" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="220">
        <template #default="scope">
          <el-button title="编辑" type="primary" icon="edit" circle @click.prevent="editRow(scope.row)" />
          <el-button title="删除" type="danger" icon="delete" circle @click.prevent="deleteRow(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog destroy-on-close class="dialogTableVisibleclass" v-model="outerVisible" title="新增位号">
      <div class="div-container">
        <el-form ref="AddruleFormRef" :rules="rules" :model="addDeviceType" label-width="auto" style="width: 600px"
          class="form-container">
          <el-form-item label="位号名称" prop="pointName">
            <el-input v-model="addDeviceType.pointName" />
          </el-form-item>
          <el-form-item label="信号值" prop="pointCode">
            <el-input v-model="addDeviceType.pointCode" />
          </el-form-item>
          <el-form-item label="数据类型" prop="pointTypeFlag">
            <el-select v-model="addDeviceType.pointTypeFlag" placeholder="请选择" size="large">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="关联组" prop="groupId">
            <el-select v-model="addDeviceType.groupId" placeholder="请选择" size="large">
              <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="参数名称" prop="displayTypeItem">
            <el-input v-model="addDeviceType.displayTypeItem" />
          </el-form-item> -->
          <!-- <el-form-item label="参数类型" prop="displayTypeFlag">
            <el-select v-model="addDeviceType.displayTypeFlag" placeholder="请选择" size="large">
              <el-option v-for="item in displayTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="数据精度" prop="valueDecimal">
            <el-input v-model="addDeviceType.valueDecimal" />
          </el-form-item>
          <el-form-item label="单位">
            <el-input v-model="addDeviceType.unit" />
          </el-form-item>
          <el-form-item label="基础值">
            <el-input v-model="addDeviceType.baseValue" />
          </el-form-item>
          <el-form-item label="比例系数">
            <el-input v-model="addDeviceType.multiple" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="addDeviceType.remark" type="textarea" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="outerVisible = false">关闭</el-button>
          <el-button type="primary" @click="addSave(AddruleFormRef)">增加</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog destroy-on-close class="dialogTableVisibleclass" top="5vh" v-model="outerVisibleEdit" title="编辑位号"
      width="80vw">
      <div class="div-container">
        <el-form ref="EditruleFormRef" :rules="rules" :model="editDeviceType" label-width="auto" style="width: 600px"
          class="form-container">
          <el-form-item label="位号名称" prop="pointName">
            <el-input v-model="editDeviceType.pointName" />
          </el-form-item>
          <el-form-item label="信号值" prop="pointCode">
            <el-input v-model="editDeviceType.pointCode" />
          </el-form-item>
          <el-form-item label="数据类型" prop="pointTypeFlag">
            <el-select v-model="editDeviceType.pointTypeFlag" placeholder="请选择" size="large">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="关联组" prop="groupId">
            <el-select v-model="editDeviceType.groupId" placeholder="请选择" size="large">
              <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="参数名称" prop="displayTypeItem">
            <el-input v-model="editDeviceType.displayTypeItem" />
          </el-form-item> -->
          <!-- <el-form-item label="参数类型" prop="displayTypeFlag">
            <el-select v-model="editDeviceType.displayTypeFlag" placeholder="请选择" size="large">
              <el-option v-for="item in displayTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="数据精度" prop="valueDecimal">
            <el-input v-model="editDeviceType.valueDecimal" />
          </el-form-item>
          <el-form-item label="单位">
            <el-input v-model="editDeviceType.unit" />
          </el-form-item>
          <el-form-item label="基础值">
            <el-input v-model="editDeviceType.baseValue" />
          </el-form-item>
          <el-form-item label="比例系数">
            <el-input v-model="editDeviceType.multiple" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="editDeviceType.remark" type="textarea" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="outerVisibleEdit = false">关闭</el-button>
          <el-button type="primary" @click="editSave(EditruleFormRef)">编辑</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog destroy-on-close v-model="dialogTypeFormVisible" :title="dialogTypeTitle">
      <div class="div-container">
        <el-form class="form-container2" ref="dialogTypeForm" :inline="true" :model="dialogTypeFormData"
          :rules="dialogTypeRules">
          <el-form-item label="参数值" prop="value">
            <el-input v-model="dialogTypeFormData.value" placeholder="参数值" />
          </el-form-item>
          <el-form-item label="含义" prop="name">
            <el-input v-model="dialogTypeFormData.name" placeholder="含义" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitTypeItems(dialogTypeForm)">+添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="dialogTypeItems" style="width: 100%; margin-bottom: 20px" border row-key="id">
        <el-table-column prop="value" label="参数值" width="180" />
        <el-table-column prop="name" label="含义" />
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button type="danger" @click="removeTypeItemsItem(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="dialogTypeFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="savePointItem">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "profile",
  inheritAttrs: false,
});
import { useRoute, useRouter } from 'vue-router'
import PointApi, { DeviceTypeReq, LogPageQuery } from "@/api/point";
import pointGroupApi from "@/api/pointGroup";

import type { FormInstance, FormRules } from 'element-plus'
let deviceTypeId = ref('');
let pointGroupID = ref('')
const route = useRoute()
const router = useRouter()
if (route.query.deviceTypeId) {
  deviceTypeId.value = route.query.deviceTypeId as string
  pointGroupID.value = route.query.pointGroupID as string
}
let addDeviceType = reactive<DeviceTypeReq>({
  pointName: undefined,
  "pointCode": "",
  "pointTypeFlag": 'STRING',
  "baseValue": 0,
  "multiple": 1,
  "groupId": pointGroupID.value,
  "valueDecimal": undefined,
  "unit": undefined,
  "deviceTypeId": deviceTypeId.value,
  "enableFlag": undefined,
  "remark": undefined,
  "displayTypeFlag": undefined,
  "displayTypeItem": undefined
});
const AddruleFormRef = ref<FormInstance>()
const EditruleFormRef = ref<FormInstance>()
const dialogTypeForm = ref<FormInstance>()
const rules = reactive<FormRules<DeviceTypeReq>>({
  pointName: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  pointCode: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  groupId: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  pointTypeFlag: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  // displayTypeFlag: [
  //   { required: true, message: '请选择', trigger: 'change' },
  // ],
  // displayTypeItem: [
  //   { required: true, message: '请选择', trigger: 'blur' },
  // ],
  remark: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'blur',
    },
  ],
})

const options = [
  {
    value: 'STRING',
    label: '字符串',
  },
  {
    value: 'INT',
    label: '短整型',
  }, {
    value: 'LONG',
    label: '长整型',
  }, {
    value: 'FLOAT',
    label: '浮点数',
  }, {
    value: 'ENUM',
    label: '枚举',
  }, {
    value: 'BUTTON',
    label: '按钮',
  }
  // {
  //   value: 'STRING',
  //   label: '字符串(string)',
  // },
  // {
  //   value: 'BYTE',
  //   label: '字节(byte)',
  // },
  // {
  //   value: 'SHORT',
  //   label: '短整数(short)',
  // },
  // {
  //   value: 'INT',
  //   label: '整数(int)',
  // },
  // {
  //   value: 'LONG',
  //   label: '长整数(long)',
  // },
  // {
  //   value: 'FLOAT',
  //   label: '浮点数(float)',
  // },
  // {
  //   value: 'DOUBLE',
  //   label: '双精度浮点数(double)',
  // },
  // {
  //   value: 'BOOLEAN',
  //   label: '布尔量(boolean)',
  // }
]

const displayTypeList = [
  {
    value: 'STRING',
    label: '字符串',
  },
  {
    value: 'BUTTON',
    label: '按钮',
  },
  {
    value: 'OPTION',
    label: '下拉框',
  },
  {
    value: 'CURVE',
    label: '曲线',
  },
]

let editDeviceType = reactive<DeviceTypeReq>({
  "pointName": undefined,
  "pointCode": "",
  "pointTypeFlag": 'STRING',
  "baseValue": 0,
  "multiple": 0,
  "groupId": pointGroupID.value,
  "valueDecimal": undefined,
  "unit": undefined,
  "deviceTypeId": deviceTypeId.value,
  "enableFlag": undefined,
  "remark": undefined,
  // "displayTypeFlag": undefined,
  "displayTypeItem": undefined
});
/**
@date: 2024-08-31 14:55:16
新增电子围栏
*/
let outerVisible = ref(false);
/**
@date: 2024-08-31 14:55:01
编辑电子围栏
*/
let outerVisibleEdit = ref(false);
const loading = ref(false);
let pageData = ref()
/**
@date: 2024-09-06 16:28:24
位号组列表
*/
let groupList = ref([{
  "groupName": "",
  "id": ""
}])
/** 用户查询参数  */
let queryParams = reactive<LogPageQuery>({
  "pages": {
    "current": 1,
    "size": 10,
    "startTime": undefined,
    "endTime": undefined,
    "orders": [
      {
        "column": undefined,
        "asc": true
      }
    ]
  },
  "pointName": undefined,
  "pointCode": undefined,
  "pointTypeFlag": undefined,
  "rwFlag": undefined,
  "deviceTypeId": deviceTypeId.value,
  "enableFlag": undefined,
  pointGroupId: pointGroupID.value
});
/** 查询 */
function handleQuery() {
  loading.value = true;
  PointApi.getPage(queryParams)
    .then((data) => {
      pageData.value = data.records;
      queryParams.pages.total = data.total;
      queryParams.pages.current = data.current;
    })
    .finally(() => {
      loading.value = false;
    });
}
function addPageQuery() {
  outerVisible.value = true
  pointGroupList()
}
function pointGroupList() {
  loading.value = true;
  let group = {
    deviceTypeId: deviceTypeId.value,
    "pages": {
      "current": 1,
      "size": 9999,
      "startTime": undefined,
      "endTime": undefined,
      "orders": [
        {
          "column": undefined,
          "asc": true
        }
      ]
    },
  };
  pointGroupApi.getPage(group)
    .then((data) => {
      groupList.value = data.records;
      console.log('分页', data);
    })
    .finally(() => {
      loading.value = false;
    });
}
/**
@date: 2024-09-04 17:09:35
添加位号
*/
const addSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      PointApi.addDevType(addDeviceType)
        .then((data) => {
          console.log(data);
          handleQuery();
        })
        .finally(() => {
          outerVisible.value = false

        });
    } else {
      console.log('error submit!', fields)
    }
  })
}

function editRow(datas: any) {
  outerVisibleEdit.value = true
  Object.assign(editDeviceType, { ...datas });
  pointGroupList()
}
/**
@date: 2024-08-31 14:23:01
编辑电子围栏
*/
const editSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      PointApi.editSave(editDeviceType)
        .then((data) => {
          handleQuery();
          ElMessage.success('编辑成功');
          outerVisibleEdit.value = false
        })
        .finally(() => {
          outerVisibleEdit.value = false

        });
    } else {
      console.log('error submit!', fields)
    }
  })
}
function deleteRow(datas: any) {
  PointApi.deleteSave(datas.id)
    .then((data) => {
      console.log('添加', data);
      handleQuery();
      ElMessage.success('删除成功');
    })
    .finally(() => {
    });
}
let dialogTypeTitle = ref('')
let dialogTypeId = ref('')
let dialogTypeFormVisible = ref(false)
let dialogTypeFormData = ref<DialogTypeFormData>({
  value: '',
  name: ''
})
let dialogTypeItems = ref<DialogTypeFormData[]>([
  {
    value: '',
    name: ''
  }
])
// 定义一个类型，其中 name 的类型为 any
interface DialogTypeFormData {
  value: any;
  name: any;  // 将 name 的类型设为 any
}
interface RuleForm {
  name: string
  value: string
}

let dialogTypeRules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
  ],
  value: [
    { required: true, message: '请输入值', trigger: 'blur' },
  ]
})

const onSubmitTypeItems = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

      dialogTypeItems.value.push(dialogTypeFormData.value)
      dialogTypeFormData.value = {
        value: '',
        name: ''
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
function removeTypeItemsItem(item: any) {
  console.log(item);
  var index = dialogTypeItems.value.indexOf(item)
  if (index !== -1) {
    dialogTypeItems.value.splice(index, 1)
  }
}
function addTypeItmes(item: any) {
  console.log(item);
  dialogTypeItems.value = item.displayTypeItem ? item.displayTypeItem : []
  dialogTypeTitle.value = item.pointName + '的字段含义'
  dialogTypeId.value = item.id
  dialogTypeFormVisible.value = true
}
function savePointItem() {
  let data = {
    pointId: dialogTypeId.value,
    itemList: dialogTypeItems.value
  }
  PointApi.savePointItem(data)
    .then((data) => {
      handleQuery();
      ElMessage.success('设置成功');
      dialogTypeFormVisible.value = false
    })
    .finally(() => {
      console.log(6666, 'qqqqqqq');

      dialogTypeFormVisible.value = false
    });
}

function comeBack() {
  router.go(-1)
}
onMounted(() => {
  handleQuery();
});
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 10px;

  :deep(.el-table tr) {
    background-color: transparent
  }

  :deep(.form-container2) {
    .el-select__selected-item {
      span {
        color: #ededed;
      }
    }

    .el-form-item__label {
      color: #ededed;
    }

    .el-input__inner {
      color: #ededed;
    }

    .el-textarea__inner {
      color: #ededed;

    }
  }

  :deep(.form-container) {
    .el-select__selected-item {
      span {
        color: #333;
      }
    }

    .el-form-item__label {
      color: #333;
    }

    .el-input__inner {
      color: #333;
    }

    .el-textarea__inner {
      color: #333;

    }
  }
}

.searchs {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.addType {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
}
</style>
